<template>
    <view class="container">
        <!-- 课程标题 -->
        <view class="course-title">
            <text class="title-text">{{ courseInfo.title }}</text>
        </view>

        <!-- 标签页导航 -->
        <view class="tab-nav">
            <uni-segmented-control :current="activeTab" :values="tabList" @clickItem="onTabChange" styleType="text"
                activeColor="#409EFF" />
        </view>

        <!-- 内容区域 -->
        <view class="content-area">
            <!-- 简介标签页 -->
            <view v-if="activeTab === 0" class="intro-content">
                <view class="section">
                    <text class="section-title">课程详情</text>
                    <text class="section-text">{{ courseInfo.description }}</text>
                </view>
                <view class="section">
                    <text class="section-title">讲师名称</text>
                    <text class="section-text">{{ courseInfo.instructor }}</text>
                </view>
                <view class="section">
                    <text class="section-title">学习时间范围</text>
                    <view class="time-range">
                        <view class="time-item">
                            <text class="time-label">开始时间：</text>
                            <text class="time-value">{{ courseInfo.startTime }}</text>
                        </view>
                        <view class="time-item">
                            <text class="time-label">结束时间：</text>
                            <text class="time-value">{{ courseInfo.endTime }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 学习资料标签页 -->
            <view v-if="activeTab === 1" class="materials-content">
                <!-- 视频资料 -->
                <view class="material-section">
                    <text class="material-title">视频资料</text>
                    <view class="video-container">
                        <video :src="courseInfo.videoUrl" :controls="true"
                            :show-center-play-btn="true" :show-play-btn="true" :show-fullscreen-btn="true"
                            :show-progress="true" :enable-progress-gesture="true" :show-loading="true"
                            :object-fit="'contain'" @play="onVideoPlay" @pause="onVideoPause" @ended="onVideoEnded"
                            @timeupdate="onVideoTimeUpdate" class="video-player"></video>
                    </view>
                    <view class="progress-info">
                        <text class="progress-text">已学习{{ courseInfo.videoLearned }}分钟需学习{{ courseInfo.videoTotal
                            }}分钟</text>
                    </view>
                </view>

                <!-- 文档资料 -->
                <view class="material-section">
                    <text class="material-title">文档资料</text>
                    <view class="document-card">
                        <view class="document-info">
                            <text class="document-title">{{ courseInfo.documentName }}</text>
                            <view class="progress-info">
                                <text class="progress-text">已学习{{ courseInfo.documentLearned }}分钟需学习{{
                                    courseInfo.documentTotal }}分钟</text>
                            </view>
                        </view>
                        <button class="view-btn" @click="viewDocument">查看</button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 标签页配置
const tabList = ref(['简介', '学习资料'])
const activeTab = ref(0)

// 课程信息
const courseInfo = ref({
    title: '消防安全培训',
    description: '消防安全培训课程旨在提高参与者对消防安全的认识，教授基本的消防知识和技能，以便在火灾发生时能够采取正确的行动保护自己和他人的安全。',
    instructor: '张教授',
    startTime: '2024-04-01 09:00:00',
    endTime: '2024-04-30 18:00:00',
    releaseTime: '2024-04-03 10:10:10',
    videoLearned: 10,
    videoTotal: 30,
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4', // 示例视频URL
    documentName: '消防安全.pdf',
    documentLearned: 10,
    documentTotal: 30
})

// 标签页切换
function onTabChange(e) {
    activeTab.value = e.currentIndex
}

// 查看文档
function viewDocument() {
    uni.showToast({
        title: '查看文档',
        icon: 'none'
    })
}

// 视频播放事件处理
function onVideoPlay() {
    console.log('视频开始播放')
}

function onVideoPause() {
    console.log('视频暂停')
}

function onVideoEnded() {
    console.log('视频播放结束')
    // 可以在这里更新学习进度
    courseInfo.value.videoLearned = courseInfo.value.videoTotal
}

function onVideoTimeUpdate(e) {
    console.log('视频播放进度:', e.detail.currentTime)
    // 可以在这里记录播放进度
}

// 页面加载时获取课程详情
onMounted(() => {
    // 获取路由参数
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    if (currentPage.options) {
        const { id, title } = currentPage.options
        if (id) {
            console.log('课程ID:', id)
            // 这里可以根据ID请求课程详情数据
        }
        if (title) {
            courseInfo.value.title = decodeURIComponent(title)
        }
    }
})
</script>

<style scoped>
.container {
    min-height: 100vh;
    background-color: #fff;
    padding: 0 30rpx;
}

.course-title {
    padding: 40rpx 0 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.title-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.tab-nav {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.content-area {
    padding: 30rpx 0;
}

/* 简介内容样式 */
.intro-content .section {
    margin-bottom: 40rpx;
}

.section-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
}

.section-text {
    display: block;
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
}

.time-range {
    display: flex;
    flex-direction: column;
    gap: 15rpx;
}

.time-item {
    display: flex;
    align-items: center;
}

.time-label {
    font-size: 28rpx;
    color: #666;
    margin-right: 10rpx;
    min-width: 120rpx;
}

.time-value {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}

/* 学习资料样式 */
.material-section {
    margin-bottom: 40rpx;
}

.material-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
}

.video-container {
    margin-bottom: 20rpx;
}

.video-player {
    width: 100%;
    height: 400rpx;
    border-radius: 12rpx;
    overflow: hidden;
}

.progress-info {
    margin-top: 10rpx;
}

.progress-text {
    font-size: 26rpx;
    color: #666;
}

.document-card {
    background: #fff;
    border: 2rpx solid #409EFF;
    border-radius: 12rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.document-info {
    flex: 1;
}

.document-title {
    display: block;
    font-size: 30rpx;
    color: #333;
    margin-bottom: 10rpx;
}

.view-btn {
    background: #409EFF;
    color: #fff;
    border-radius: 8rpx;
    padding: 12rpx 32rpx;
    font-size: 28rpx;
    border: none;
    margin-left: 20rpx;
}
</style>